[iOS 10] タブアイテムに赤丸以外のバッチが表示可能になりました

1 はじめに

UITabBarItemは、タブ上に並ぶアイテムですが、これには追加の情報としてバッジを表示することができます。 従来、このバッジは、「赤い丸印に白い文字」で統一されていました。しかし、iOS 10 以降、これが変更可能になっています。 また、選択されていないアイテムのTintColorも変更が可能になりました。

今回は、これらの装飾について試してみました。

2 バッチ

(1) 追加されたプロパティとメソッド

iOS 9 までのbadgeValueでは、赤い丸の中に白色で文字を表示することしか出来ませんでした。

if let tabItem = self.tabBarController?.tabBar.items?[0] {
    tabItem.badgeValue = "new"
}
if let tabItem = self.tabBarController?.tabBar.items?[1] {
    tabItem.badgeValue = "5"
}

そして、iOS 10以降、このbadgeValueに、新しいプロパティとメソッドが追加されました。

var badgeColor: UIColor?

func badgeTextAttributes(for: UIControlState)
func setBadgeTextAttributes([String : Any]?, for: UIControlState)

(2) badgeColor

badgeColorに色を設定することで、赤色以外の背景色のバッジが表示可能になりました。

if let tabItem = self.tabBarController?.tabBar.items?[0] {
    tabItem.badgeColor = UIColor.darkGray
    tabItem.badgeValue = "new"
}
if let tabItem = self.tabBarController?.tabBar.items?[1] {
    tabItem.badgeColor = UIColor.blue
    tabItem.badgeValue = "5"
}

(3) setBadgeTextAttributes(_:for:)

setBadgeTextAttributesを使用して、バッチの中のテキストのアトリビュートも変更可能です。

下記では、選択時に青色でイタリックのフォントになるように設定しています。

if let tabItem = self.tabBarController?.tabBar.items?[0] {
    tabItem.badgeValue = "123"
}
if let tabItem = self.tabBarController?.tabBar.items?[1] {
    let badgeTextAttributes = [ NSForegroundColorAttributeName : UIColor.blue, NSFontAttributeName : UIFont.italicSystemFont(ofSize:    12) ]
    tabItem.setBadgeTextAttributes(badgeTextAttributes, for: .selected)
    tabItem.badgeValue = "123"
}

3 unselectedTintColor

選択されていないアイテムのTintColorの設定が追加されました。

var unselectedItemTintColor: UIColor?

使用してみると、結構イメージが変わってきます。

if let tabItem = self.tabBarController?.tabBar.items?[0] {
    tabItem.badgeValue = "1"
}
if let tabItem = self.tabBarController?.tabBar.items?[1] {
    tabItem.badgeValue = "12"
}
self.tabBarController?.tabBar.unselectedItemTintColor = UIColor.orange
self.tabBarController?.tabBar.tintColor = UIColor.red

4 最後に

今回は、iOS 10 で新しく追加された、タブの装飾について試してみました。

赤丸に白文字という定形だったバッジを開発者が自由に変更できるようになったと言うことで、より一層、アプリのイメージに合ったバッジを表示できるようになるかも知れません。

5 参考リンク

badgeColor
badgeTextAttributes(for:)
setBadgeTextAttributes(_:for:)